<template>
  <el-form-item label="游戏品牌：">
    <el-select v-model="data.query.platform" placeholder="请选择" filterable @change="chooseCate">
      <el-option label="全部" :value="-1" />
      <el-option class="marginB5 marginT5" v-for="item in data.platformList" :key="item.value" :label="item.label" :value="item.value" v-show="item.status">
        <el-tag class="width100">{{ item.label }}</el-tag>
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="游戏：" v-show="props.gameShow">
    <el-select v-model="data.query.game_id" placeholder="请选择" filterable :filter-method="filterGame">
      <el-option label="全部" :value="-1" v-show="props.allShow"/>
      <el-option v-for="item in data.gameList" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value" v-show="item.status">
        <!-- :value="item.value" v-show="!props.thirdShow?item.status:item.game_source"> -->
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
import { selectToLabel } from '@/utils/index'
import { GameBrandNum } from '@/config/eunm'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  allShow: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  gameShow: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  thirdShow: {
    type: Boolean,
    default: () => {
      return false
    }
  },
})

export interface GameType {
  platform: number
  game_id: number
}
const data = reactive({
  query: {
    platform: -1,
    game_id: -1,
  },
  game_type: -1,
  platformList:indexStore.platformArray,
  gameList:indexStore.gameArray as any,
  // 默认选中第一个游戏的页面
  gamePathList: [
    { label: '游戏水位', value: 'winLose' },
    { label: 'JILI数值效果', value: 'gameJili' },
  ] 
})

const emit = defineEmits(['query'])
watch(
  () => data.query,
  (to) => {
    emit('query', { ...data.query })
  },
  { deep: true, immediate: true }
)

onMounted(async () => {
  getGameType(-1)
})

const gameShow = () => {
  if(data.query.platform == -1 && data.game_type==-1){ // 品牌为全部 游戏为全部
    data.gameList.forEach((item:any)=>{
      item.status = 1
    })
  }else if(data.query.platform !=-1 && data.game_type==-1){ // 选择品牌 不选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform !=-1 && data.game_type!=-1){ // 选择品牌 选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform && item.type == data.game_type){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform ==-1 && data.game_type !=-1){ // 不选择品牌 选择游戏类型(隐藏没有此游戏的品牌)
    let platformData  = [] as number[],newData=[] as any[],dataList = [] as any[];
    data.gameList.forEach((item:any)=>{
      if(item.type == data.game_type){
        item.status = 1
        platformData.push(item.platform_backend_echo,)
      }else{
        item.status = 0
      }
    })
    newData = [...new Set(platformData)]
    newData.forEach((item:number)=> {
      // 排除已经合并的品牌
      if(selectToLabel(GameBrandNum,item)){
        dataList.push({label:selectToLabel(GameBrandNum,item),value:item, status: 1 })
      }
    })
    data.platformList = dataList
  }
  if(props.thirdShow){
    data.gameList.forEach((item:any)=>{
      if(item.game_source){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }
}

// 选择游戏品牌
const chooseCate = (value:number) => {
  data.query.platform = value
  data.query.game_id = -1
  gameShow()
}
// 选择游戏
const filterGame = (value:any) => {
  data.gameList.forEach((item:any)=>{
    // 品牌=全部；游戏类型 = 全部
    if(data.query.platform == -1 && data.game_type==-1){
      item.status = 1
    }else if(data.query.platform == -1 && data.game_type!=-1){
      if(item.type==data.game_type){
        item.status = 1
      }else{
        item.status = 0
      }
    }
    item.remark = item.label+item.value
  })
  // 搜索值
  if(value){
    let game = data.gameList.filter((item:any) => item.status && item.remark.toLowerCase().includes(value.toLowerCase()))
    if(!game.length) return
    data.gameList.forEach((item:any)=>{
      if(item.status){
        if(data.query.platform){
          item.status = 0
          game.forEach((second:any) => {
            // 查询是否包含游戏
            if(second.value == item.value){
              // 查询全部
              if(data.game_type==-1 && !props.thirdShow){
                item.status = 1
                // 如果-游戏类型有值且不是第三方游戏
              }else if(data.game_type!=-1 && !props.thirdShow && second.type ==  data.game_type){
                item.status = 1
                // 查询第三方游戏
              }else if(data.game_type==-1 && props.thirdShow && second.game_source){
                item.status = 1
              }else{
                item.status = 0
              }
            }
          })
        }else{
          game.forEach((second:any) => {
            if(item.status && second.value == item.value){
              item.status = 1
            }
          })
        }
      }
    })
  }else{
    gameShow()
  }
}

// 赋值游戏类型
const getGameType = (type:number) => {
  data.game_type = type
  data.platformList = indexStore.platformArray
  data.gameList = indexStore.gameArray
  gameShow()
}

// 选择游戏【默认选择第一个】
const getFirstSearchList = async () => {
  data.query.platform = -1
  data.query.game_id = -1
  return {...data.query}
}

// 赋值游戏类型
const onHideDetails = (type:number) => {
  data.query.platform = -1
  data.query.game_id = -1
  data.game_type = type
  data.platformList = indexStore.platformArray
  data.gameList = indexStore.gameArray
  gameShow()
}

// 回显选择值
const setBackQuery= (query:any) => {
  if(query.game_type){
    data.game_type = query.game_type
  }
  data.query = {
    platform: query.platform,
    game_id: query.game_id
  }
}

defineExpose({
  getGameType,
  onHideDetails,
  getFirstSearchList,
  setBackQuery
})
</script>

<style lang="scss" scoped>
.colorsRed{
  font-size: 12px;
}
</style>